<template>
  <Dialog
    :visible="addDialogVisible"
    :destroy-on-close="true"
    @close="hangleCloseAddDialog"
    title="新增社团成员"
    width="40%"
  >
    <el-form :model="form" :rules="rules" ref="formRef" class="myform">
      <div class="input-group">
        <el-form-item label-width="100px" label="姓名" prop="memberName">
          <el-input v-model="form.memberName"></el-input>
        </el-form-item>

        <el-form-item label-width="100px" label="性别" prop="sex">
          <el-select v-model="form.sex">
            <el-option
              v-for="item in options['性别']"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>

      <div class="input-group">
        <el-form-item label-width="100px" label="学号" prop="studentID">
          <el-input v-model="form.studentID"></el-input>
        </el-form-item>

        <el-form-item label-width="100px" label="学院" prop="college">
          <el-input v-model="form.college"></el-input>
        </el-form-item>
      </div>

      <div class="input-group">
        <el-form-item label-width="100px" label="联系电话" prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>

        <el-form-item label-width="100px" label="加入时间" prop="joinTime">
          <el-date-picker
            v-model="form.joinTime"
            type="date"
            placeholder="请选择"
          />
        </el-form-item>
      </div>

      <div class="sp">
        <div class="label">所在社团及职位</div>

        <el-form-item
          v-for="(item, index) in form.positions"
          :label="'职位' + (index + 1)"
          label-width="100px"
        >
          <el-col :span="10">
            <el-form-item :prop="`positions.${index}.organization`" :rules="rules.organization">
              <el-select v-model="item.organization">
                <OrganizationOption></OrganizationOption>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8" style="margin: 0 20px">
            <el-form-item>
              <el-input v-model="item.position">
              </el-input>
            </el-form-item>
          </el-col>

          <div class="btns" v-if="index === form.positions.length - 1">
            <el-button @click="minusPosition" v-if="index !== 0">
              <el-icon><Minus /></el-icon>
            </el-button>

            <el-button @click="addPosition">
              <el-icon><Plus /></el-icon>
            </el-button>
          </div>
        </el-form-item>
      </div>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="hangleCloseAddDialog">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from 'element-plus';

import { options } from "@/data/select.ts";

import PositionOption from "@/components/common/PositionOption.vue";
import OrganizationOption from "@/components/common/OrganizationOption.vue";
import Dialog from '@/components/common/Dialog.vue';

import { checkPhone } from '@/utils/check.ts'

import { addMember } from "@/api/member/index.ts";
import { useStore } from "vuex";

const props = defineProps(["addDialogVisible"]);
const emits = defineEmits(["closeAddDialog", "confirm"]);

const formRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  memberName: [
    {
      required: true,
      message: '请输入姓名',
      trigger: 'blur',
    },
  ],
  sex: [
    {
      required: true,
      message: '请选择性别',
      trigger: 'change',
    },
  ],
  studentID: [
    {
      required: true,
      message: '请输入学号',
      trigger: 'blur',
    },
  ],
  college: [
    {
      required: true,
      message: '请输入学院',
      trigger: 'blur',
    },
  ],
  phone: [
    {
      required: true,
      validator: checkPhone,
      trigger: 'blur'
    }
  ],
  joinTime: [
    {
      required: true,
      message: '请选择加入时间',
      trigger: 'change'
    }
  ],
  organization: [
    {
      required: true,
      message: '请选择社团',
      trigger: 'input'
    }
  ]
});

const form = reactive({
  memberName: "",
  sex: "",
  studentID: "",
  college: "",
  joinTime: "",
  phone: "",
  positions: [
    {
      organization: "",
      position: "",
    },
  ],
});

const hangleCloseAddDialog = () => {
  emits("closeAddDialog");
};

const store = useStore();

const add = async () => {
  const memberInfo: IObj = {
    name: form.memberName,
    sex: form.sex,
    studentID: form.studentID,
    college: form.college,
    joinTime: form.joinTime,
    phone: form.phone,
    positions: form.positions
  };

  hangleCloseAddDialog();

  const { data: res } = await addMember(memberInfo);

  if (res.code === 200) {
    emits("confirm");

    // form.memberName = "";
    // form.sex = "";
    // form.studentID = "";
    // form.college = "",
    // form.joinTime = "";
    // form.phone = "";
    // form.positions = [
    //   {
    //     organization: "",
    //     position: "",
    //   },
    // ];
  }
};

const handleConfirm = async () => {
  if (formRef.value) {
    await (formRef.value as FormInstance).validate((valid: boolean, fields) => {

      if (valid) {
        add();
      } else {
        console.log(fields);
      }
    })
  }
}

const addPosition = () => {
  form.positions.push({
    organization: "",
    position: "",
  });
};

const minusPosition = () => {
  form.positions.pop();
};
</script>

<style lang="less" scoped>
.myform {
  padding: 0 20px;

  :deep(.el-select) {
    width: 100%;
  }

  :deep(.el-textarea__inner) {
    height: 100px;
    resize: none;
  }
  .input-group {
    width: 100%;
    display: flex;
    // justify-content: space-between;
    :deep(.el-form-item) {
      width: 44%;
      // margin-bottom: 8px;
    }
  }

  .sp {
    .label {
      margin-bottom: 18px;
    }

    .btns {
      .el-button {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #4977af;

        i {
          color: #fff;
          font-size: 20px;
        }
      }
    }
  }
}
</style>
